<template>
	<div class="users">
		<div class="hr"><el-button type="success" icon="el-icon-plus" @click="openDialog()">新增</el-button></div>
		<el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" border>
			<el-table-column prop="id" label="用户id" width="80"></el-table-column>
			<el-table-column prop="content" label="内容"></el-table-column>
			<el-table-column prop="username" label="评论用户"></el-table-column>
			<el-table-column prop="nickname" label="昵称"></el-table-column>
			<el-table-column prop="like" label="点赞数"></el-table-column>
			<el-table-column fixed="right" label="操作" width="100">
				<template slot-scope="scope">
					<el-button type="text" size="small" @click="onDelete(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			:current-page="page"
			:page-sizes="[5, 10, 15, 20]"
			:page-size="limit"
			layout="total, sizes, prev, pager, next, jumper"
			:total="total"
		></el-pagination>
	</div>
</template>

<script>
export default {
	name: 'message-page',
	data() {
		return {
			tableData: [],
			url: {
				list: '/message',
				delete: '/message/delete'
			},
			limit: 5,
			page: 1,
			total: 0
		};
	},
	created() {
		this.getDataList();
	},
	methods: {
		//获取数据
		getDataList() {
			this.$http
				.get(this.url.list, {
					params: {
						limit: this.limit,
						page: this.page
					}
				})
				.then(res => {
					console.log(res);
					this.tableData = res.data.results;
					this.total = res.data.total;
				});
		},
		onDelete(id) {
			this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.$http.post(this.url.delete, { id }).then(res => {
						console.log(res);
						if (res && res.status == 200) {
							this.$message({
								message: '删除成功',
								type: 'success'
							});
							this.getDataList();
						}
					});
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
		},
		handleSizeChange(val) {
			console.log(val);
			this.limit = val;
			this.getDataList();
		},
		handleCurrentChange(val) {
			console.log(val);
			this.page = val;
			this.getDataList();
		}
	}
};
</script>

<style scoped lang="less"></style>
